<!DOCTYPE html>
<html lang="en">
<head>
	<title>La Casa - Real Estate HTML5 Home Page Template</title>
	<meta charset="utf-8">
	<meta name="author" content="pixelhint.com">
	<meta name="description" content="La casa free real state fully responsive html5/css3 home page website template"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
	
	<link rel="stylesheet" type="text/css" href="css/signupin.css">
	
	<!-- 表单的css -->
	<!-- <link rel="stylesheet" type="text/css" href="css/register.css"> -->
	
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/jquery.metadata.js"></script>
	<script type="text/javascript" src="js/resgin.js"></script>


	
	<script type="text/javascript">
	
	$(document).ready(function() {
		$("#signupForm2").hide();
		$("#show_email_signup").click(function() {
			$("#signupForm").hide();
			$("#signupForm2").show();
		});
		$("#show_phone_signup").click(function() {
			$("#signupForm2").hide();
			$("#signupForm").show();
		});
	});
	
	function ajaxVaildatePhone() {
		var vaildate = true;
		$("label").each(function() {
            var labelval = $(this).html();
            if($.trim(labelval) == $.trim("请输入手机号") && $(".error").eq(0).css("display")=='block' ||
            	$.trim(labelval) == $.trim("手机号有误") && $(".error").eq(0).css("display")=='block'){
            	alert("labelval="+labelval);
                vaildate = false;
                return false;
                /*return false;——跳出所有循环；相当于 java 中的 break 效果。
                return true;——跳出当前循环，进入下一个循环；相当于 javascript 中的 continue 效果*/

            }
        });
		
		if(vaildate) {
			$.ajax({
            	data:"telphone="+$("#telphone").val(),
            	type:"GET",
            	dataType:'json',
            	url:"user/vaildatePhone.do",
            	error:function(data) {

            	},
            	success: function(data) {
            		if($.trim(data.msg)==$.trim("手机号已被注册"))
            			$("#phone_vaildate").html(data.msg).css("color","red");
            		else
               	 		$("#phone_vaildate").html(data.msg).css("color","green"); 
            	}
        	});
		}
	}
	
	function ajaxVaildateEmail() {
		var vaildate = true;
		var obj=$("#signupForm2"); 
		alert("labelval="+$('label[for='+obj.attr('signupForm2')+']').html());
		$("label").each(function() {
            var labelval = $(this).html();
            if($.trim(labelval) == $.trim("请输入邮箱") && $(".error").eq(1).css("display")=='block'||
            	$.trim(labelval) == $.trim("邮箱有误") && $(".error").eq(1).css("display")=='block'){
            	alert("labelval="+labelval);
            	alert("display="+$(".error").eq(2).css("display")=='block');
                vaildate = false;
                return false;
                /*return false;——跳出所有循环；相当于 java 中的 break 效果。
                return true;——跳出当前循环，进入下一个循环；相当于 javascript 中的 continue 效果*/

            }
        });
		
		if(vaildate) {
			$.ajax({
            	data:"email="+$("#email").val(),
            	type:"GET",
            	dataType:'json',
            	url:"user/vaildateEmail.do",
            	error:function(data) {

            	},
            	success: function(data) {
            		if($.trim(data.msg)==$.trim("邮箱已被注册"))
            			$("#email_vaildate").html(data.msg).css("color","red");
            		else
               	 		$("#email_vaildate").html(data.msg).css("color","green"); 
            	}
        	});
		}
	}

	function ajaxVaildateUser() {
        var vaildate = true;
        $("label").each(function() {
            var labelval = $(this).html();
            /*alert("labelval="+labelval);*/
            if($.trim(labelval) == $.trim("请输入手机号") && $(".error").css("display")=='block' ||
            	$.trim(labelval) == $.trim("手机号有误") &&  $(".error").css("display")=='block' ||
            	$.trim(labelval) == $.trim("请输入邮箱") &&  $(".error").css("display")=='block'||
            	$.trim(labelval) == $.trim("邮箱有误") && $(".error").css("display")=='block'){
            	alert("labelval="+labelval);
                vaildate = false;
                return false;
                /*return false;——跳出所有循环；相当于 java 中的 break 效果。
                return true;——跳出当前循环，进入下一个循环；相当于 javascript 中的 continue 效果*/

            }
        });

        if(vaildate) {
        	if($("#signupForm2").is(":hidden")) {	//验手机号
        		$.ajax({
                	data:"telphone="+$("#telphone").val(),
                	type:"GET",
                	dataType:'json',
                	url:"user/vaildatePhone.do",
                	error:function(data) {

                	},
                	success: function(data) {
                		if($.trim(data.msg)==$.trim("手机号已被注册"))
                			$("#phone_vaildate").html(data.msg).css("color","red");
                		else
                   	 		$("#phone_vaildate").html(data.msg).css("color","green"); 
                	}
            	});

        	} else {	//验邮箱
        		$.ajax({
                	data:"email="+$("#email").val(),
                	type:"GET",
                	dataType:'json',
                	url:"user/vaildateEmail.do",
                	error:function(data) {

                	},
                	success: function(data) {
                		if($.trim(data.msg)==$.trim("邮箱已被注册"))
                			$("#email_vaildate").html(data.msg).css("color","red");
                		else
                   	 		$("#email_vaildate").html(data.msg).css("color","green"); 
                	}
            	});
        	}
            
        }

    }

    function resetVaildateUser() {
    	if($("#signupForm2").is(":hidden"))	//手机号
    		$("#phone_vaildate").html(""); 
    	else
    		$("#email_vaildate").html(""); 
    }

	</script>
</head>
<body>

	<section class="hero">
	
		<div class="signupNav">
			<div id="label"><a href="index.html" >&#60; Back to HomePage</a></div>
		</div>
		<div class="signup">
			<div id="logo">
				<img class="logo" src="img/1.0logo_vqfr2u.png"></img>
			</div>
			<p style="text-align:center;"><a style="font-size:12px">Find you new hone on YouFound</a></p>
			<div class="form_wrapper">
				<form id="signupForm" method="post" action="" class="zcform">
					<p class="clearfix">
						<!-- style="float:left; margin-bottom:10px; -->
						<button id="show_email_signup"  type="button">&#60;---go to email sign up</button>
					</p>
					<p class="clearfix">
							<input
							id="telphone" name="telphone" class="required" value
							placeholder="Phone Number" style="border-radius:5px"
							onblur="ajaxVaildatePhone()" onfocus="resetVaildateUser()"/>
						<label id="phone_vaildate">
						</label>
					</p>
					<p class="clearfix">
							<input class="identifying_code"
							type="text" value placeholder="Verification Code" style="border-radius:8px;"/> <input
							class="get_code" type="button" value="Send" style="border-radius:8px;"/>
					</p>
					<p class="clearfix">
							<input
							id="password" name="password" type="password"
							class="{required:true,rangelength:[8,20],}" value
							placeholder="Your Password" style="border-radius:8px;"/>
					</p>
					<p class="clearfix agreement">
						<input type="checkbox" /><b class="left"><a style="color: #666">Read and agreed</a><a href="#">《User Agreement》</a>
						</b>
					</p>
					<p class="clearfix">
						<input class="submit" type="submit" value="Submit" style="border-radius:8px;"/>
					</p>
					<p class="last">
						<a style="font-size:16px; color: black">Aready a user?</a>
						<a href="signin.html">Login</a>
					</p>
				</form>
				<form id="signupForm2" method="post" action="" class="zcform">
					<p class="clearfix">
						<button id="show_phone_signup" type="button">&#60;---sign up with cellphone</button>
					</p>
					<p class="clearfix">
							<input
							id="email" name="email" class="required" value
							placeholder="Email" style="border-radius:8px;"
							onblur="ajaxVaildateEmail()" onfocus="resetVaildateUser()"/>
							<label id="email_vaildate"> 
							</label>
					</p>
					<p class="clearfix">
							<input
							id="password" name="password" type="password"
							class="{required:true,rangelength:[8,20],}" value
							placeholder="Your Password" style="border-radius:8px"/>
					</p>
					<p class="clearfix">
							<input class="identifying_code"
							type="text" value placeholder="Verification Code" style="border-radius:8px"/> <input
							class="get_code" type="button" value="DDH8" style="border-radius:8px;"/>
					</p>
					<p class="clearfix agreement">
						<input type="checkbox" /><b class="left"><a style="color: #666">Read and agreed</a><a href="#">《User Agreement》</a>
						</b>
					</p>
					<p class="clearfix">
						<input class="submit" type="submit" value="Submit" style="border-radius:8px;"/>
					</p>
					<p class="last">
						<a style="font-size:16px; color: black">Aready a user?</a>
						<a href="signin.html">Login</a>
					</p>
				</form>
			</div>



		</div>
		<!-- <section class="caption">
			<h2 class="caption">Find You Dream Home</h2>
			<h3 class="properties">Already a user?</h3>
			<h3 >Already a user?<a href="register.jsp" style="font-size:3em ">Login</a></h3>
			
		</section> -->
		
	</section>
	<!--  end hero section  -->

	
	<footer>
		<div class="wrapper footer">
			<ul>
				<li class="links">
					<ul>
						<li><a href="#">About</a></li>
						<li><a href="#">Support</a></li>
						<li><a href="#">Terms</a></li>
						<li><a href="#">Policy</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</li>

				<li class="links">
					<ul>
						<li><a href="#">Appartements</a></li>
						<li><a href="#">Houses</a></li>
						<li><a href="#">Villas</a></li>
						<li><a href="#">Mansions</a></li>
						<li><a href="#">...</a></li>
					</ul>
				</li>

				<li class="links">
					<ul>
						<li><a href="#">New York</a></li>
						<li><a href="#">Los Anglos</a></li>
						<li><a href="#">Miami</a></li>
						<li><a href="#">Washington</a></li>
						<li><a href="#">...</a></li>
					</ul>
				</li>

				<li class="about">
					<p>La Casa is real estate minimal html5 website template, designed and coded by pixelhint, tellus varius, dictum erat vel, maximus tellus. Sed vitae auctor ipsum</p>
					<ul>
						<li><a href="http://facebook.com/pixelhint" class="facebook" target="_blank"></a></li>
						<li><a href="http://twitter.com/pixelhint" class="twitter" target="_blank"></a></li>
						<li><a href="http://plus.google.com/+Pixelhint" class="google" target="_blank"></a></li>
						<li><a href="#" class="skype"></a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div class="copyrights wrapper">
			Copyright © 2015 <a href="http://pixelhint.com" target="_blank" class="ph_link" title="Download more free Templates">Pixelhint.com</a>. All Rights Reserved.
		</div>
	</footer><!--  end footer  -->
	
</body>
</html>